<template>
  <div class="category">
      <!-- <h2>分类</h2>
      <h5>目前共计48个标签</h5> -->
      <el-row :gutter="20">
        <el-col :span="3" class="col-left">
          <router-link @click.native="change(0)" :to="{ path: '/category'}" tag='li'>全部</router-link>
          <!-- <router-link @click.native="change(item.id)" :class="{last:index == (category.length - 1)}" v-for="(item, index) in category" :key='index' :to="{ path: '/category', query: {id: item.id}}" tag='li'>{{item.name}}</router-link> -->
          <router-link @click.native="change(1)" :to="{ path: '/category/aa'}" tag='li'>Nginx</router-link>
          <router-link @click.native="change(2)" :to="{ path: '/category/bb'}" tag='li'>MySql</router-link>
          <router-link @click.native="change(3)" :to="{ path: '/category/cc'}" tag='li'>Python</router-link>
          <router-link @click.native="change(4)" :to="{ path: '/category/dd'}" tag='li'>Linux</router-link>
          <router-link @click.native="change(5)" :to="{ path: '/category/ee'}" tag='li'>PHP</router-link>
          <router-link @click.native="change(6)" :to="{ path: '/category/ff'}" tag='li'>技术杂谈</router-link>
        </el-col>
<div class="search">
  <input value="输入id"/>
  <button class="search1" @click="search">搜索文章</button>
</div>
<div class="list1" v-for="item in bb" v-bind:key="item.articleId">
          <div class="list12">
          <img  class="image" style="" src="../../static/photo1.jpg"/>
          </div>
          <div class="list13">
          <a class="pp1" @click="tt">{{item.articleId}}</a><br/>
<p class="pp2"><i class="el-icon-user-solid"></i>作者Mr.Yong <i class="el-icon-time"></i>发表于:{{item.createTime}} <i class="el-icon-s-unfold"></i>分类{{item.classifyName}} | 阅读量23 | 评论数0</p><br/>
<p class="pp3">整理了部分有关Apahce调优的配置说明，后续陆续的将所有调优方式更新。{{item.articleDescription}}</p>
<!-- <p class="pp4">果显示 | Field |Type | Null | Key | Default | Extra | | :---- | ------------ | ---- | ---- | ------- | -------------- | | id | int(11) | NO | P</p> -->
<el-tag class="pp5" type="success">Linux</el-tag>
<el-tag class="pp5" type="success">Apache</el-tag>
<div class="list14"><button @click="del(item.articleId)" class="del">X</button></div>

          </div>
</div>

  



      </el-row>
  </div>
</template>

<script>
import ArticleScrollPage from '@/components/ArticleScrollPage'
import {getCates} from '@/api/cate';
import axios from 'axios'
let _this = this;
export default {
  name: 'Category',
  props:{
    id:{defult:0}
  },
  components:{
    ArticleScrollPage
  },
  data () {
    return {
      // name: '',
      // goods: [
      //   {name: '女装' ,link: 'goods'},
      //   {name: '男装' ,link: 'goods'}
      // ],
      moviesArr: [],
      aa: [],
      bb: [],
      bbb: [],
      cc: [],
      category:[],
      params: {
        query: {
          cate_id: 0
        }
      },
    }
  },
  // created() {
  //           this.initData();
  //           /** 初始化其他 */
  //           let pId= this.$route.params.pId;
  //           if(pId){
  //               this.initOther(pId);
  //           }
  //       },
        // watch: {
        //     //监听相同路由下参数变化的时候，从而实现异步刷新
        //     '$route'(to,from) {
        //         //做一些路由变化的响应
        //         //打开加载动画
        //         this.loading = true;
        //         //重新获取数据
        //         this.initData();
        //         /** 初始化其他数据 */
        //         let pid= this.$route.params.pid;
        //         if(pid){
        //             this.initOther(pid);
        //         }
        //     },
        // },
  mounted(){
    _this = this;
    _this.params.query.cate_id = _this.$route.query.id ? _this.$route.query.id : 0;
    _this.getCategory();
    // 新加的
    // _this.stri= _this.$route.query.type
    // _this.$router.push({ path: 'Nginx', query: { plan: Date.now().toString()}})
  },
  // 这个是新加的
  beforeMount () {
    // var token = localStorage.getItem('Authorization')
    // console.log(token)
    axios.get('http://31f747b701.qicp.vip/blog/article-blog/list/1/10').then(response => {
      const bb = response.data.data
      const bbb = response.data
      console.log(bb)
      console.log(bbb)
      console.log('d')
      this.bb = bb
    })
      .catch((error) => {
        console.log(error)
      }),
      axios.get('http://31f747b701.qicp.vip/blog/label-blog/list').then(response => {
      const aa = response
      const aaa = response.data.data
      console.log(aa)
      console.log(aaa)
      console.log('w')
      this.aa = aa
    })
      .catch((error) => {
        console.log(error)
      })
  },
//   watch: {
//     '$route' (to, from) {
//       console.log(this.$route.query)
//     }
// },
  methods:{
     del(id){
    
  axios.get(`http://31f747b701.qicp.vip/blog/article-blog/delete/${id}`)
    .then(response =>{ // 使用then方法进行跳转
       console.log('删除结果', response)
       this.getData1()

    //  this.$router.push({path:'/category/aa'}) // 跳转到当前的主页展示博客页面当中去，也就是/根路径
         }).catch(() =>{
         console.log('idsdsfd')
         })
  
   },
    getData () {
      
      axios.post('http://31f747b701.qicp.vip/blog/label-blog/insert').then(response => {
        console.log(response)
        console.log(222)
      }, response => {
        console.log('error')
      })
    },
     getData1 () {
      
      axios.get('http://31f747b701.qicp.vip/blog/article-blog/list/1/10')
      .then(response => {
         console.log(response)
        console.log('成功')
      }, response => {
        console.log('error')
      })
    },
    getData2 () {
      
      axios.get('http://31f747b701.qicp.vip/blog/label-blog/list').then(response => {
        console.log(response)
      }, response => {
        console.log('error')
      })
    },
    getCategory(){
      getCates().then(res => {
        _this.category = res.data
      })
    },
    change(id){
      _this.params.query.cate_id  = id;
    },
    tt(){
      this.$router.push('/view/1')
    },
    search(){
         this.$alert('你好，欢迎来到我们的博客', '搜索文章', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: '成功'
            });
          }
        });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.category
  width 65%
  text-align center
  h2
    line-height 100px
    color #555
    font-weight 500
  h5
    font-weight 500
    color #555
  .el-row
    width 100%
    .col-right
      margin-left 20%
      min-height 600px
    .col-left
      padding  20px 0
      margin 20px 0
      background-color #ffffff
      position fixed
      li
        list-style none
        padding 5px 20px
        text-align center 
        cursor pointer
        display block
        color #555
        line-height 2
      .router-link-exact-active
        color #409eff  
</style>
<style>
.list1{
  width: 1100px;
  height:200px;
  border:3px solid whitesmoke;
  margin-left: 300px;
  margin-top: 30px;
  /* white-space: nowrap;
  overflow: hidden; */
}
.pp1{
  font-size: 25px;
  font-weight: bold;
  /* margin-left: -605px; */
  margin-top: 10px;
}
.pp2{
   text-align: center;
   margin-top: 10px;
}
.pp3{text-align: center;}
.pp4{margin-left: 10px; margin-top: 10px;text-align: left;}
.pp5{ margin-top: 10px;}
a:hover{
  text-decoration: underline;
}
.list12{
  float: left;
  width: 200px;
  height: 200px;
  /* border: 1px solid red; */
}
.list13{
  float: left;
  width: 880px;
  height: 200px;
  text-align:center;
  /* border: 1px solid yellow; */
}
.moviesContainer{
        width: 1100px;
        display: flex;
        padding:10rpx;
        height:200px;
        border:3px solid whitesmoke;
        margin-left: 300px;
        margin-top: 30px;
    }
    .movies_name{
        font-size: 32rpx;
        color: #333;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .image{
      margin-top: 5%;
      width:90%;
      height:90%;
      border-radius: 100px;
    }
    .del{
      margin-right: -90px;
      border-radius: 25px;
      width: 50px;
      background-color: whitesmoke;
      height: 50px;
      }
    .list14{
      float: right;
      width: 100px;
      height: 100px;
      /* border:1px solid red; */
      margin-top: -100px;
     
    }
    .search{
      /* border: 1px solid red; */
      widows: 100%;
    }
    .search1{
      width: 100px;
      height: 30px;
    }
    input{
      height: 30px;
      width: 200px;
    }
</style>
